{% extends "base.html" %}
{% load humanize %}
{% load display_tags %}
{% load static %}
{% block content %}
    {{ block.super }}

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading tight">
                <h3 class="has-filters">
                    Components
                    <div class="dropdown pull-right">
                        <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                    </div>
                </h3>
            </div>
            <div id="the-filters" class="is-filters panel-body collapse {% if filter.form.has_changed %}in{% endif %}">
                {% include "dojo/filter_snippet.html" with form=filter.form %}
            </div>
        </div>
        <div class="clearfix">
            {% include "dojo/paging_snippet.html" with page=result page_size=True %}
        </div>
        <div class="panel panel-default table-responsive">
            <table id="components" class="tablesorter-bootstrap table table-condensed table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Version</th>
                        <th>Active</th>
                        <th>Duplicate</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in result  %}
                    <tr>
                        <td>
                            {% if result.component_name == none %}
                            <a href="{% url 'all_findings' %}?has_component=false"><b>{{ result.component_name }}</b></a>
                            {% else %}
                                <a href="{% url 'all_findings' %}?component_name={{ result.component_name }}"><b>{{ result.component_name }}</b></a>
                            {% endif %}
                        </td>

                        <td>{{result.component_version}} </td>
                        <td class="text-right">
                            {% if result.active and result.component_name == none %}
                            <a href="{% url 'open_findings' %}?has_component=false"><b>{{ result.active }}</b></a>
                            {% elif result.active%}
                            <a href="{% url 'open_findings' %}?component_name={{ result.component_name }}"><b>{{ result.active }}</b></a>
                            {% else %}
                            0
                            {% endif %}
                        </td>
                        <td class="text-right">
                            {% if result.duplicate and result.component_name == none %}
                            <a href="{% url 'all_findings' %}?has_component=false&duplicate=1"><b>{{ result.duplicate }}</b></a>
                            {% elif result.duplicate %}
                            <a href="{% url 'all_findings' %}?component_name={{ result.component_name }}&duplicate=1"><b>{{ result.duplicate }}</b></a>
                            {% else %}
                            0
                            {% endif %}
                        </td>
                        <td class="text-right">
                            {% if result.total and result.component_name == none %}
                            <a href="{% url 'all_findings' %}?has_component=false"><b>{{ result.total }}</b></a>
                            {% elif result.total %}
                            <a href="{% url 'all_findings' %}?component_name={{ result.component_name }}"><b>{{ result.total }}</b></a>
                            {% else %}
                            0
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="clearfix">
            {% include "dojo/paging_snippet.html" with page=result page_size=True %}
        </div>
    </div>
</div>
{% endblock %}
{% block postscript %}
    {{ block.super }}
<script>
        $(function () {
            //Ensures dropdown has proper zindex
            $('.table-responsive').on('show.bs.dropdown', function () {
              $('.table-responsive').css( "overflow", "inherit" );
            });

            $('.table-responsive').on('hide.bs.dropdown', function () {
              $('.table-responsive').css( "overflow", "auto" );
            })
            var availableTags = [
                {% for word in component_words %}
                    "{{word}}",
                {% endfor %}
            ];
            $("#id_component_name").autocomplete({
                source: availableTags
            });
        });
</script>
<script>
    // DataTables setup
    $(document).ready(function() {
        date =  new Date().toISOString().slice(0, 10);
        var fileDated = 'Product_Components_' + date;
        var buttonCommon = {
            exportOptions: {
                stripHtml: true,
                stripNewlines: true,
                trim: true,
                orthogonal: 'export'
            },
            filename: fileDated,
            title: 'Product Components'
        };

        // Mapping of table columns to objects for proper cleanup and data formatting
        {% if enable_table_filtering %}
            var dojoTable = $('#components').DataTable({
                drawCallback: function(){
                    $('#components .has-popover').hover(
                        function() { $(this).popover('show'); }, // hover
                        function() { $(this).popover('hide'); } // unhover
                    );
                },
                "columns": [
                        { "data": "Component_name" },
                        { "data": "Version" },
                        { "data": "Active" },
                        { "data": "Duplicate" },
                        { "data": "Total" },
                ],
                order: [],
                columnDefs: [
                    {
                        "orderable": false,
                    },
                ],
                dom: 'Bfrtip',
                paging: false,
                info: false,
                buttons: [
                    {
                        extend: 'colvis',
                        columns: ':not(.noVis)'
                    },
                    $.extend( true, {}, buttonCommon, {
                        extend: 'copy'
                    }),
                    $.extend( true, {}, buttonCommon, {
                        extend: 'excel',
                        autoFilter: true,
                        sheetName: 'Exported data',
                    }),
                    $.extend( true, {}, buttonCommon, {
                        extend: 'csv'
                    }),
                    $.extend( true, {}, buttonCommon, {
                        extend: 'pdf',
                        orientation: 'landscape',
                        pageSize: 'LETTER'
                    }),
                    $.extend( true, {}, buttonCommon, {
                        extend: 'print'
                    }),
                ],
            });
        {% endif %}
    });
</script>
{% include "dojo/filter_js_snippet.html" %}
{% endblock %}